<template>
	<el-main class="bg edit_wrap">
		<el-form ref="form" :model="form" status-icon label-width="120px" v-if="is_view()">
			<el-col v-if="user_group === '管理员' || $check_field('get','meeting_id') || $check_field('add','meeting_id') || $check_field('set','meeting_id')" 
				:xs="24" :sm="12" :lg="8" class="el_form_item_warp">
				<el-form-item label="会议" prop="meeting_id">
					<el-select id="meeting_id" v-model.number="form['meeting_id']" placeholder="请选择会议" filterable clearable
						v-if="user_group === '管理员' || (form['speaker_id'] && $check_field('set','meeting_id')) || (!form['speaker_id'] && $check_field('add','meeting_id'))" 
						:disabled="disabledObj['meeting_id_isDisabled']" @visible-change="loadMeetings">
						<el-option 
							v-for="meeting in meetingList" 
							:key="meeting.meeting_information_id" 
							:label="`${meeting.meeting_number} - ${$getBilingualText(meeting.conference_name)}`" 
							:value="meeting.meeting_information_id">
						</el-option>
					</el-select>
					<div v-else-if="$check_field('get','meeting_id')">{{getMeetingDisplay(form['meeting_id'])}}</div>
				</el-form-item>
			</el-col>
		<el-col v-if="user_group === '管理员' || $check_field('get','speaker_name') || $check_field('add','speaker_name') || $check_field('set','speaker_name')" 
			:xs="24" :sm="12" :lg="8" class="el_form_item_warp">
			<el-form-item label="嘉宾姓名" prop="speaker_name">
				<BilingualInput 
					v-if="user_group === '管理员' || (form['speaker_id'] && $check_field('set','speaker_name')) || (!form['speaker_id'] && $check_field('add','speaker_name'))"
					v-model="form['speaker_name']"
					field="speaker_name"
					label="嘉宾姓名"
					input-type="input"
					:disabled="disabledObj['speaker_name_isDisabled']"
				/>
				<div v-else-if="$check_field('get','speaker_name')">{{$getBilingualText(form['speaker_name'])}}</div>
			</el-form-item>
		</el-col>
			<el-col v-if="user_group === '管理员' || $check_field('get','speaker_photo') || $check_field('add','speaker_photo') || $check_field('set','speaker_photo')" 
				:xs="24" :sm="12" :lg="8" class="el_form_item_warp">
				<el-form-item label="嘉宾照片" prop="speaker_photo">
					<el-upload :disabled="disabledObj['speaker_photo_isDisabled']" id="speaker_photo" class="avatar-uploader" drag
						accept="image/gif, image/jpeg, image/png, image/jpg" action="" :http-request="upload_speaker_photo"
						:show-file-list="false" v-if="user_group === '管理员' || (form['speaker_id'] && $check_field('set','speaker_photo')) || (!form['speaker_id'] && $check_field('add','speaker_photo'))">
						<img v-if="form['speaker_photo']" :src="$fullUrl(form['speaker_photo'])" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
					<el-image v-else-if="$check_field('get','speaker_photo')" style="width: 100px; height: 100px"
						:src="$fullUrl(form['speaker_photo'])" :preview-src-list="[$fullUrl(form['speaker_photo'])]">
						<div slot="error" class="image-slot">
							<img src="../../../public/img/error.png" style="width: 90px; height: 90px" />
						</div>
					</el-image>
				</el-form-item>
			</el-col>
		<el-col v-if="user_group === '管理员' || $check_field('get','speaker_position') || $check_field('add','speaker_position') || $check_field('set','speaker_position')" 
			:xs="24" :sm="12" :lg="8" class="el_form_item_warp">
			<el-form-item label="嘉宾职位" prop="speaker_position">
				<BilingualInput 
					v-if="user_group === '管理员' || (form['speaker_id'] && $check_field('set','speaker_position')) || (!form['speaker_id'] && $check_field('add','speaker_position'))"
					v-model="form['speaker_position']"
					field="speaker_position"
					label="嘉宾职位"
					input-type="input"
					:input-props="{placeholder: '如：日本工程院外籍院士、日本电气通信大学'}"
					:disabled="disabledObj['speaker_position_isDisabled']"
				/>
				<div v-else-if="$check_field('get','speaker_position')">{{$getBilingualText(form['speaker_position'])}}</div>
			</el-form-item>
		</el-col>
			<el-col v-if="user_group === '管理员' || $check_field('get','display_order') || $check_field('add','display_order') || $check_field('set','display_order')" 
				:xs="24" :sm="12" :lg="8" class="el_form_item_warp">
				<el-form-item label="显示顺序" prop="display_order">
					<el-input-number id="display_order" v-model.number="form['display_order']" :min="0"
						v-if="user_group === '管理员' || (form['speaker_id'] && $check_field('set','display_order')) || (!form['speaker_id'] && $check_field('add','display_order'))" 
						:disabled="disabledObj['display_order_isDisabled']"></el-input-number>
					<div v-else-if="$check_field('get','display_order')">{{form['display_order']}}</div>
				</el-form-item>
			</el-col>
		<el-col v-if="user_group === '管理员' || $check_field('get','speaker_bio') || $check_field('add','speaker_bio') || $check_field('set','speaker_bio')" 
			:xs="24" :sm="24" :lg="24" class="el_form_editor_warp">
			<el-form-item label="嘉宾简介" prop="speaker_bio">
				<BilingualInput 
					v-if="user_group === '管理员' || (form['speaker_id'] && $check_field('set','speaker_bio')) || (!form['speaker_id'] && $check_field('add','speaker_bio'))"
					v-model="form['speaker_bio']"
					field="speaker_bio"
					label="嘉宾简介"
					input-type="quill"
					:disabled="disabledObj['speaker_bio_isDisabled']"
				/>
				<div v-else-if="$check_field('get','speaker_bio')" v-html="$getBilingualText(form['speaker_bio'])"></div>
			</el-form-item>
		</el-col>

			<el-col :xs="24" :sm="12" :lg="8" class="el_form_btn_warp">
				<el-form-item>
					<el-button type="primary" @click="submit()">提交</el-button>
					<el-button @click="cancel()">取消</el-button>
				</el-form-item>
			</el-col>
		</el-form>
	</el-main>
</template>

<script>
	import mixin from "@/mixins/page.js";

	export default {
		mixins: [mixin],
		data() {
			return {
				field: "speaker_id",
				url_add: "~/api/speaker/add?",
				url_set: "~/api/speaker/set?",
				url_get_obj: "~/api/speaker/get_obj?",
				url_upload: "~/api/speaker/upload?",

				query: {
					"speaker_id": 0,
				},

				form: {
					"meeting_id": 0,
					"speaker_name": '', // JSON格式: {"zh": "中文", "en": "English"}
					"speaker_photo": '',
					"speaker_position": '', // JSON格式
					"speaker_bio": '', // JSON格式
					"display_order": 0,
					"speaker_id": 0,
				},
				disabledObj:{
					"meeting_id_isDisabled": false,
					"speaker_name_isDisabled": false,
					"speaker_photo_isDisabled": false,
					"speaker_position_isDisabled": false,
					"speaker_bio_isDisabled": false,
					"display_order_isDisabled": false,
				},
				meetingList: [], // 会议列表
			}
		},
		methods: {
			/**
			 * 加载会议列表
			 */
			async loadMeetings(visible) {
				if (visible && this.meetingList.length === 0) {
					try {
						const json = await this.$get("~/api/meeting_information/get_list?size=1000");
						if (json.result && json.result.list) {
							this.meetingList = json.result.list;
						}
					} catch (e) {
						console.error('加载会议列表失败:', e);
					}
				}
			},
			
			/**
			 * 获取会议显示文本
			 */
			getMeetingDisplay(meetingId) {
				if (!meetingId) return '';
				const meeting = this.meetingList.find(m => m.meeting_information_id === meetingId);
				if (meeting) {
					return `${meeting.meeting_number} - ${this.$getBilingualText(meeting.conference_name)}`;
				}
				return meetingId;
			},
			
			upload_speaker_photo(param) {
				this.uploadFile(param.file, "speaker_photo");
			},
			is_view(){
				var bl = this.user_group == "管理员";

				if(!bl){
					bl = this.$check_action('/speaker/table','add');
					console.log(bl ? "你有表格添加权限视作有添加权限" : "你没有表格添加权限");
				}
				if(!bl){
					bl = this.$check_action('/speaker/table','set');
					console.log(bl ? "你有表格添加权限视作有修改权限" : "你没有表格修改权限");
				}
				if(!bl){
					bl = this.$check_action('/speaker/view','add');
					console.log(bl ? "你有视图添加权限视作有添加权限" : "你没有视图添加权限");
				}
				if(!bl){
					bl = this.$check_action('/speaker/view','set');
					console.log(bl ? "你有视图修改权限视作有修改权限" : "你没有视图修改权限");
				}
				if(!bl){
					bl = this.$check_action('/speaker/view','get');
					console.log(bl ? "你有视图查询权限视作有查询权限" : "你没有视图查询权限");
				}

				console.log(bl ? "具有当前页面的查看权，请注意这不代表你有字段的查看权" : "无权查看当前页，请注意即便有字段查询权限没有页面查询权限也不行");

				return bl;
			},
		}
	}
</script>
<style>
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
</style>

